import './style.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import { fromLonLat } from 'ol/proj';
import { ImageWMS } from 'ol/source';
import Image from 'ol/layer/Image';
import XYZ from 'ol/source/XYZ';

const gaodeSource = new TileLayer({
  name: 'gaodeLayer',
  source: new XYZ({
    url: 'http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
    crossOrigin: 'anonymous',
    projection: 'EPSG:3857'
  }),
  visible: true
});

const map = new Map({
  target: 'map',
  layers: [
    gaodeSource,
  ],
  view: new View({
    center: fromLonLat([125.35, 43.88]),
    zoom: 6,
    minZoom: 5,
    maxZoom: 15
  })
});

// const BASE_URL = 'http://47.83.116.67:8080';
const BASE_URL = 'http://localhost:8080';


// 添加东北边界图层
const neBoundary = new Image({
  name: 'neBoundary',
  source: new ImageWMS({
    url: `${BASE_URL}/geoserver/a/wms`,
    params: {
      LAYERS: 'a:东北地区边界',
      TILED: true
    },
    serverType: 'geoserver',
    ratio: 1
  }),
  opacity: 0.8,
  visible: true
});
map.addLayer(neBoundary);

const mainRiver = new Image({
  name: 'mainRiver',
  source: new ImageWMS({
    url: `${BASE_URL}/geoserver/a/wms`,
    params: {
      LAYERS: 'a:主要河流',
      TILED: true
    },
    serverType: 'geoserver',
    ratio: 1
  }),
  opacity: 0.8,
  visible: true
});
map.addLayer(mainRiver);

const elevation100m = new Image({
  name: 'elevation100m',
  source: new ImageWMS({
    url: `${BASE_URL}/geoserver/a/wms`,
    params: {
      LAYERS: 'a:高程100m',
      TILED: false
    },
    serverType: 'geoserver',
    ratio: 1
  }),
  opacity: 0.8,
  visible: true
});
map.addLayer(elevation100m);


const elevation250m = new Image({
  name: 'elevation250m',
  source: new ImageWMS({
    url: `${BASE_URL}/geoserver/a/wms`,
    params: {
      LAYERS: 'a:高程250m',
      TILED: false
    },
    serverType: 'geoserver',
    ratio: 1
  }),
  opacity: 0.8,
  visible: true
});
map.addLayer(elevation250m);

const countyBoundary = new Image({
  name: 'countyBoundary',
  source: new ImageWMS({
    url: `${BASE_URL}/geoserver/a/wms`,
    params: {
      LAYERS: 'a:县界',
      TILED: false
    },
    serverType: 'geoserver',
    ratio: 1,
    projection: 'EPSG:4326'
  }),
  opacity: 0.5,
  visible: true
});
map.addLayer(countyBoundary);

const provinceBoundary = new Image({
  name: 'provinceBoundary',
  source: new ImageWMS({
    url: `${BASE_URL}/geoserver/a/wms`,
    params: {
      LAYERS: 'a:省界',
      TILED: true
    },
    serverType: 'geoserver',
    ratio: 1
  }),
  opacity: 0.5,
  visible: true
});
map.addLayer(provinceBoundary);

const cityBoundary = new Image({
  name: 'cityBoundary',
  source: new ImageWMS({
    url: `${BASE_URL}/geoserver/a/wms`,
    params: {
      LAYERS: 'a:市界',
      TILED: true
    },
    serverType: 'geoserver',
    ratio: 1
  }),
  opacity: 0.5,
  visible: true
});
map.addLayer(cityBoundary);

const countyLevelCityPoint = new Image({
  name: 'countyLevelCityPoint',
  source: new ImageWMS({
    url: `${BASE_URL}/geoserver/a/wms`,
    params: {
      LAYERS: 'a:县级市点',
      TILED: true
    },
    serverType: 'geoserver',
    ratio: 1
  }),
  opacity: 0.8,
  visible: true
});
map.addLayer(countyLevelCityPoint);

const cityPoint = new Image({
  name: 'cityPoint',
  source: new ImageWMS({
    url: `${BASE_URL}/geoserver/a/wms`,
    params: {
      LAYERS: 'a:地级市点',
      TILED: true
    },
    serverType: 'geoserver',
    ratio: 1
  }),
  opacity: 0.8,
  visible: true
});
map.addLayer(cityPoint);

const provincialCapitalPoint = new Image({
  name: 'provincialCapitalPoint',
  source: new ImageWMS({
    url: `${BASE_URL}/geoserver/a/wms`,
    params: {
      LAYERS: 'a:省会城市点',
      TILED: true
    },
    serverType: 'geoserver',
    ratio: 1
  }),
  opacity: 0.8,
  visible: true
});
map.addLayer(provincialCapitalPoint);

const simulateSmallBasinBoundaryData = new Image({
  name: 'simulateSmallBasinBoundaryData',
  source: new ImageWMS({
    url: `${BASE_URL}/geoserver/a/wms`,
    params: {
      LAYERS: 'a:模拟小流域边界数据',
      TILED: true
    },
    serverType: 'geoserver',
    ratio: 1
  }),
  opacity: 0.5,
  visible: true
});
map.addLayer(simulateSmallBasinBoundaryData);

// 图层控制
// 辅助函数：通过图层名称获取图层
function getLayerByName(name) {
  let layer = null;
  map.getLayers().forEach(function(lyr) {
    if (lyr.get('name') === name) {
      layer = lyr;
    }
  });
  return layer;
}

document.getElementById('baseLayer').addEventListener('change', function() {
  const layer = getLayerByName('gaodeLayer');
  if (layer) {
    layer.setVisible(this.checked);
  }
});

document.getElementById('neBorderLayer').addEventListener('change', function() {
  const layer = getLayerByName('neBoundary');
  if (layer) {
    layer.setVisible(this.checked);
  }
});

document.getElementById('mianRiverLayer').addEventListener('change', function() {
  const layer = getLayerByName('mainRiver');
  if (layer) {
    layer.setVisible(this.checked);
  }
});

document.getElementById('elevation100mLayer').addEventListener('change', function() {
  const layer = getLayerByName('elevation100m');
  if (layer) {
    layer.setVisible(this.checked);
  }
});

document.getElementById('elevation250mLayer').addEventListener('change', function() {
  const layer = getLayerByName('elevation250m');
  if (layer) {
    layer.setVisible(this.checked);
  }
});

document.getElementById('countyBoundaryLayer').addEventListener('change', function() {
  const layer = getLayerByName('countyBoundary');
  if (layer) {
    layer.setVisible(this.checked);
  }
});

document.getElementById('provinceBoundaryLayer').addEventListener('change', function() {
  const layer = getLayerByName('provinceBoundary');
  if (layer) {
    layer.setVisible(this.checked);
  }
});

document.getElementById('cityBoundaryLayer').addEventListener('change', function() {
  const layer = getLayerByName('cityBoundary');
  if (layer) {
    layer.setVisible(this.checked);
  }
});

document.getElementById('countyLevelCityPointLayer').addEventListener('change', function() {
  const layer = getLayerByName('countyLevelCityPoint');
  if (layer) {
    layer.setVisible(this.checked);
  }
});

document.getElementById('cityPointLayer').addEventListener('change', function() {
  const layer = getLayerByName('cityPoint');
  if (layer) {
    layer.setVisible(this.checked);
  }
});

document.getElementById('provincialCapitalPointLayer').addEventListener('change', function() {
  const layer = getLayerByName('provincialCapitalPoint');
  if (layer) {
    layer.setVisible(this.checked);
  }
});

document.getElementById('simulateSmallBasinBoundaryDataLayer').addEventListener('change', function() {
  const layer = getLayerByName('simulateSmallBasinBoundaryData');
  if (layer) {
    layer.setVisible(this.checked);
  }
});

// 页面加载时强制设置所有复选框为勾选状态
document.addEventListener('DOMContentLoaded', () => {
  // 获取所有图层控制复选框
  const checkboxes = document.querySelectorAll('.layer-control input[type="checkbox"]');

  // 遍历所有复选框
  checkboxes.forEach((checkbox, index) => {
    if (index === 0) {
      checkbox.checked = true;
      checkbox.dispatchEvent(new Event('change'));
    } else {
      checkbox.checked = false;
      checkbox.dispatchEvent(new Event('change'));
    }
  });

  // 获取图层控制头部和内容
  const layerControlHeader = document.querySelector('.layer-control-header');
  const layerControlContent = document.querySelector('.layer-control-content');
  const toggleIcon = document.querySelector('.toggle-icon');

  // 默认展开图层控制
  layerControlContent.classList.add('expanded');
  toggleIcon.classList.remove('rotated');

  // 添加点击事件监听器
  layerControlHeader.addEventListener('click', () => {
    layerControlContent.classList.toggle('expanded');
    toggleIcon.classList.toggle('rotated');
  });
});
